<template>
  <view class="card" @click="handleClick">
    <view class="card-title">
      <view class="card-title-left">
        <text class="line" v-if="props.titleLine"></text>
        <text v-if="props.icon" :style="props.iconStyle">{{ props.icon }}</text>
        <text>{{ props.title }}</text>
      </view>
      <view class="card-title-right" v-if="props.more && !$slots.right" @click.prevent.stop="handleMore">
        <text>{{ props.moreText }}</text>
        <up-icon color="#9FA2A7" style="margin-top:4rpx" name="arrow-right" size="24rpx"></up-icon>
      </view>
      <slot name="right" v-if="$slots.right"></slot>
    </view>
    <!-- 默认内容 -->
    <slot></slot>
  </view>
</template>
<script setup>
const emit = defineEmits(['click', 'clickLink']);

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  more: {
    type: Boolean,
    default: false
  },
  moreText: {
    type: String,
    default: '更多'
  },
  titleLine: {
    type: Boolean,
    default: false
  },
  icon: {
    type: String,
    default: ''
  },
  iconStyle: {
    type: Object,
    default: () => { }
  }
})

const handleClick = () => {
  console.log('click');
  emit('click');
}

const handleMore = () => {
  emit('clickLink');
}
</script>
<style lang="scss" scoped>
.card {
  border-radius: 30rpx;
  background-color: #fff;
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title-left {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;

  .line {
    width: 6rpx;
    height: 26rpx;
    background-color: #0060E6;
    border-radius: 2rpx;
    margin-right: 10rpx;
    display: inline-block;
    vertical-align: middle;
    margin-top: 4rpx;
  }
}

.card-title-right {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #9FA2A7;
}
</style>